<template>
  <div class="EmpBasic">
    <div class="head">
      <div class="head-left">
        <el-input
          v-model="keyword"
          placeholder="请输入员工姓名进行搜索"
          prefix-icon="el-icon-search"
          clearable
          @clear="initEmployees"
          @keydown.enter.native="initEmployees"
          :disabled="advanceSearchVisible"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 10px"
          :disabled="advanceSearchVisible"
          @click="initEmployees"
        >搜索</el-button>
        <el-button
          type="primary"
          :icon="advanceSearchVisible? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
          @click="showAdvanceSearch"
        >高级搜索</el-button>
      </div>
      <div class="head-right">
        <el-upload
          action="/employee/basic/import"
          :show-file-list="false"
          :headers="headers"
          :before-upload="beforeUpload"
          :on-success="onSuccess"
          :on-error="onError"
          style="display:inline-flex"
          :disabled="importButtonText=='正在导入'"
        >
          <el-button
            type="success"
            :icon="importButtonText=='正在导入'? 'el-icon-loading' :'el-icon-upload2'"
            :disabled="importButtonText=='正在导入'"
          >{{importButtonText}}</el-button>
        </el-upload>

        <el-button
          type="success"
          icon="el-icon-download"
          style="margin-left: 10px"
          @click="exportEmployees"
        >导出数据</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="showDialog()"
        >添加员工</el-button>
      </div>
    </div>

    <transition name="slide-fade">
      <div
        v-show="advanceSearchVisible"
        class="between-head-main"
      >
        <el-form
          ref="empForm"
          :model="employee"
          :rules="rules"
        >

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="姓名:"
                prop="name"
              >
                <el-input
                  v-model="employee.name"
                  placeholder="请输入员工姓名"
                  size="mini"
                  style="width:150px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="性别:"
                prop="gender"
              >
                <el-radio-group v-model="employee.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="身份证号:"
                prop="idCard"
              >
                <el-input
                  v-model="employee.idCard"
                  placeholder="请输入身份证号"
                  size="mini"
                  style="width:200px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item
                :label="'\xa0\xa0\xa0\xa0'+'住'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'址:'+'\xa0\xa0\xa0'"
                prop="address"
              >
                <el-input
                  v-model="employee.address"
                  placeholder="请输入住址"
                  size="mini"
                  style="width:400px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="民族:"
                prop="nationId"
              >
                <el-select
                  v-model="employee.nationId"
                  placeholder="请选择民族"
                  size="mini"
                  style="width:150px"
                >
                  <el-option
                    v-for="item in nations"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="电话:"
                prop="phone"
              >
                <el-input
                  v-model="employee.phone"
                  placeholder="请输入电话"
                  size="mini"
                  style="width:180px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="出生日期:"
                prop="birthday"
              >
                <el-date-picker
                  v-model="employee.birthday"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="mini"
                  style="width:200px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item
                :label="'\xa0\xa0\xa0\xa0'+'邮'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'箱:'+'\xa0\xa0\xa0'"
                prop="email"
              >
                <el-input
                  v-model="employee.email"
                  placeholder="请输入邮箱"
                  size="mini"
                  style="width:400px"
                  prefix-icon="el-icon-message"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="籍贯:"
                prop="nativePlace"
              >
                <el-input
                  v-model="employee.nativePlace"
                  placeholder="请输入籍贯"
                  size="mini"
                  style="width:150px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="部门:"
                prop="departmentId"
              >

                <el-popover
                  placement="bottom"
                  title="请选择部门"
                  width="200"
                  trigger="manual"
                  v-model="popoverVisible2"
                >
                  <el-button
                    icon="el-icon-edit"
                    style="width:180px; text-align: left;  color: rgb(194, 194, 194);"
                    slot="reference"
                    @click="popoverVisible2 = !popoverVisible2"
                  >{{checkedDepartmentName}}</el-button>

                  <el-tree
                    :data="departments"
                    :props="props"
                    default-expand-all
                    @node-click="handleNodeClick"
                  ></el-tree>

                </el-popover>

              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="政治面貌:"
                prop="politicId"
              >
                <el-select
                  v-model="employee.politicId"
                  placeholder="请选择政治面貌"
                  size="mini"
                  style="width:200px"
                >
                  <el-option
                    v-for="item in politicsStatuses"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item
                :label="'\xa0\xa0\xa0\xa0'+'学'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'校:'+'\xa0\xa0\xa0'"
                prop="school"
              >
                <el-input
                  v-model="employee.school"
                  placeholder="请输入毕业院校"
                  size="mini"
                  style="width:400px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="学历:"
                prop="tiptopDegree"
              >
                <el-select
                  v-model="employee.tiptopDegree"
                  placeholder="请选择学历"
                  size="mini"
                  style="width:150px"
                >
                  <el-option
                    v-for="item in tiptopDegrees"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="工号:"
                prop="workID"
              >
                <el-input
                  v-model="employee.workId"
                  size="mini"
                  style="width:180px"
                  disabled
                  :placeholder="employee.workId"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="入职时间:"
                prop="beginDate"
              >
                <el-date-picker
                  v-model="employee.beginDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="mini"
                  style="width:200px"
                >
                </el-date-picker>

              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item
                label="合同起始日期:"
                prop="beginContract"
              >
                <el-date-picker
                  v-model="employee.beginContract"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="mini"
                  style="width:400px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="专业:"
                prop="specialty"
              >
                <el-input
                  v-model="employee.specialty"
                  placeholder="请输入专业"
                  size="mini"
                  style="width:150px"
                  prefix-icon="el-icon-edit"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="职称:"
                prop="jobLevelId"
              >
                <el-select
                  v-model="employee.jobLevelId"
                  placeholder="请选择职称"
                  size="mini"
                  style="width:200px"
                >
                  <el-option
                    v-for="item in joblevels"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="转正时间:"
                prop="conversionTime"
              >
                <el-date-picker
                  v-model="employee.conversionTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="mini"
                  style="width:200px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item
                label="合同截至日期:"
                prop="endContract"
              >
                <el-date-picker
                  v-model="employee.endContract"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  size="mini"
                  style="width:400px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>

            <el-col :span="4">
              <el-form-item
                label="职位:"
                prop="posId"
              >
                <el-select
                  v-model="employee.posId"
                  placeholder="请选择职位"
                  size="mini"
                  style="width:150px"
                >
                  <el-option
                    v-for="item in positions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item
                label="婚姻状况:"
                prop="wedlock"
              >
                <el-radio-group v-model="employee.wedlock">
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item
                label="聘用形式:"
                prop="engageForm"
              >
                <el-radio-group v-model="employee.engageForm">
                  <el-radio label="劳动合同">劳动合同</el-radio>
                  <el-radio label="劳务合同">劳务合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="入职日期范围:">
                <el-date-picker
                  v-model="engageDateScope"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width:400px"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>

          </el-row>

          <div class="advance-search-buttons">
            <el-button
              @click="advanceSearchVisible = false"
              style="margin-right:20px"
            >关闭搜索框</el-button>
            <el-button
              type="primary"
              style="margin-right:130px"
              @click="initEmployees"
            >高级搜索</el-button>
          </div>

        </el-form>
      </div>
    </transition>

    <div class="main">
      <el-table
        ref="multipleTable"
        :data="employees"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        border
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>

        <el-table-column
          fixed
          label="编号"
          type="index"
          width="45"
        ></el-table-column>

        <el-table-column
          fixed
          label="姓名"
          prop="name"
          width="70"
        >
        </el-table-column>

        <el-table-column
          label="性别"
          prop="gender"
          width="50"
        >
        </el-table-column>

        <el-table-column
          label="出生日期"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.birthday }}</template>
        </el-table-column>

        <el-table-column
          label="身份证号"
          prop="idCard"
          width="150"
        >
        </el-table-column>

        <el-table-column
          label="婚姻状态"
          prop="wedlock"
          width="50"
        >
        </el-table-column>

        <el-table-column
          label="民族"
          prop="nation.name"
          width="60"
        >
        </el-table-column>

        <el-table-column
          label="籍贯"
          prop="nativePlace"
          width="70"
        >
        </el-table-column>

        <el-table-column
          label="政治面貌"
          prop="politicsStatus.name"
          width="110"
        >
        </el-table-column>

        <el-table-column
          label="邮箱"
          prop="email"
          width="180"
        >
        </el-table-column>

        <el-table-column
          label="电话"
          prop="phone"
          width="120"
        >
        </el-table-column>

        <el-table-column
          label="地址"
          prop="address"
          width="300"
        >
        </el-table-column>

        <el-table-column
          label="所属部门"
          prop="department.name"
          width="90"
        >
        </el-table-column>

        <el-table-column
          label="职位"
          prop="position.name"
          width="90"
        >
        </el-table-column>

        <el-table-column
          label="职称"
          prop="joblevel.name"
          width="110"
        >
        </el-table-column>

        <el-table-column
          label="聘用形式"
          prop="engageForm"
          width="80"
        >
        </el-table-column>

        <el-table-column
          label="最高学历"
          prop="tiptopDegree"
          width="80"
        >
        </el-table-column>

        <el-table-column
          label="专业"
          prop="specialty"
          width="150"
        >
        </el-table-column>

        <el-table-column
          label="毕业院校"
          prop="school"
          width="150"
        >
        </el-table-column>

        <el-table-column
          label="入职日期"
          prop="beginData"
          width="100"
        >
          <template slot-scope="scope">{{ scope.row.beginDate }}</template>
        </el-table-column>

        <el-table-column
          label="在职状态"
          prop="workState"
          width="50"
        >
        </el-table-column>

        <el-table-column
          label="合同期限"
          prop="contractTerm"
          width="80"
        >
          <template slot-scope="scope">{{scope.row.contractTerm}}年</template>
        </el-table-column>

        <el-table-column
          label="转正日期"
          width="100"
        >
          <template slot-scope="scope">{{ scope.row.conversionTime }}</template>
        </el-table-column>

        <el-table-column
          label="合同起始日期"
          width="100"
        >
          <template slot-scope="scope">{{ scope.row.beginContract }}</template>
        </el-table-column>

        <el-table-column
          label="合同结束日期"
          width="100"
        >
          <template slot-scope="scope">{{ scope.row.endContract }}</template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <div class="operation">
              <el-button
                type="success"
                class="operation-button"
                @click="showDialog(scope.row)"
              >编辑</el-button>
              <el-button
                type="primary"
                class="operation-button"
              >查看高级资料</el-button>
              <el-button
                type="danger"
                class="operation-button"
                @click="deleteEmployee(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="foot">
      <el-button
        type="danger"
        @click="deleteEmployees"
      >批量删除</el-button>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <div class="dialogs">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="80%"
        :close-on-click-modal="false"
        @close="dialogClose"
      >

        <div>

          <el-form
            ref="empForm"
            :model="employee"
            :rules="rules"
          >

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="姓名:"
                  prop="name"
                >
                  <el-input
                    v-model="employee.name"
                    placeholder="请输入员工姓名"
                    size="mini"
                    style="width:150px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item
                  label="性别:"
                  prop="gender"
                >
                  <el-radio-group v-model="employee.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item
                  label="身份证号:"
                  prop="idCard"
                >
                  <el-input
                    v-model="employee.idCard"
                    placeholder="请输入身份证号"
                    size="mini"
                    style="width:200px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item
                  :label="'\xa0\xa0\xa0\xa0'+'住'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'址:'+'\xa0\xa0\xa0'"
                  prop="address"
                >
                  <el-input
                    v-model="employee.address"
                    placeholder="请输入住址"
                    size="mini"
                    style="width:400px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="民族:"
                  prop="nationId"
                >
                  <el-select
                    v-model="employee.nationId"
                    placeholder="请选择民族"
                    size="mini"
                    style="width:150px"
                  >
                    <el-option
                      v-for="item in nations"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item
                  label="电话:"
                  prop="phone"
                >
                  <el-input
                    v-model="employee.phone"
                    placeholder="请输入电话"
                    size="mini"
                    style="width:180px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item
                  label="出生日期:"
                  prop="birthday"
                >
                  <el-date-picker
                    v-model="employee.birthday"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                    style="width:200px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item
                  :label="'\xa0\xa0\xa0\xa0'+'邮'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'箱:'+'\xa0\xa0\xa0'"
                  prop="email"
                >
                  <el-input
                    v-model="employee.email"
                    placeholder="请输入邮箱"
                    size="mini"
                    style="width:400px"
                    prefix-icon="el-icon-message"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="籍贯:"
                  prop="nativePlace"
                >
                  <el-input
                    v-model="employee.nativePlace"
                    placeholder="请输入籍贯"
                    size="mini"
                    style="width:150px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item
                  label="部门:"
                  prop="departmentId"
                >

                  <el-popover
                    placement="bottom"
                    title="请选择部门"
                    width="200"
                    trigger="manual"
                    v-model="popoverVisible"
                  >
                    <el-button
                      icon="el-icon-edit"
                      style="width:180px; text-align: left;  color: rgb(194, 194, 194);"
                      slot="reference"
                      @click="popoverVisible = !popoverVisible"
                    >{{checkedDepartmentName}}</el-button>

                    <el-tree
                      :data="departments"
                      :props="props"
                      default-expand-all
                      @node-click="handleNodeClick"
                    ></el-tree>

                  </el-popover>

                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item
                  label="政治面貌:"
                  prop="politicId"
                >
                  <el-select
                    v-model="employee.politicId"
                    placeholder="请选择政治面貌"
                    size="mini"
                    style="width:200px"
                  >
                    <el-option
                      v-for="item in politicsStatuses"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item
                  :label="'\xa0\xa0\xa0\xa0'+'学'+'\xa0\xa0\xa0\xa0\xa0\xa0\xa0'+'校:'+'\xa0\xa0\xa0'"
                  prop="school"
                >
                  <el-input
                    v-model="employee.school"
                    placeholder="请输入毕业院校"
                    size="mini"
                    style="width:400px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="学历:"
                  prop="tiptopDegree"
                >
                  <el-select
                    v-model="employee.tiptopDegree"
                    placeholder="请选择学历"
                    size="mini"
                    style="width:150px"
                  >
                    <el-option
                      v-for="item in tiptopDegrees"
                      :key="item"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item
                  label="工号:"
                  prop="workID"
                >
                  <el-input
                    v-model="employee.workId"
                    size="mini"
                    style="width:180px"
                    disabled
                    :placeholder="employee.workId"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item
                  label="入职时间:"
                  prop="beginDate"
                >
                  <el-date-picker
                    v-model="employee.beginDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                    style="width:200px"
                  >
                  </el-date-picker>

                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item
                  label="合同起始日期:"
                  prop="beginContract"
                >
                  <el-date-picker
                    v-model="employee.beginContract"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                    style="width:400px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="专业:"
                  prop="specialty"
                >
                  <el-input
                    v-model="employee.specialty"
                    placeholder="请输入专业"
                    size="mini"
                    style="width:150px"
                    prefix-icon="el-icon-edit"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item
                  label="职称:"
                  prop="jobLevelId"
                >
                  <el-select
                    v-model="employee.jobLevelId"
                    placeholder="请选择职称"
                    size="mini"
                    style="width:200px"
                  >
                    <el-option
                      v-for="item in joblevels"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item
                  label="转正时间:"
                  prop="conversionTime"
                >
                  <el-date-picker
                    v-model="employee.conversionTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                    style="width:200px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item
                  label="合同截至日期:"
                  prop="endContract"
                >
                  <el-date-picker
                    v-model="employee.endContract"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    size="mini"
                    style="width:400px"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>

              <el-col :span="4">
                <el-form-item
                  label="职位:"
                  prop="posId"
                >
                  <el-select
                    v-model="employee.posId"
                    placeholder="请选择职位"
                    size="mini"
                    style="width:150px"
                  >
                    <el-option
                      v-for="item in positions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="7">
                <el-form-item
                  label="婚姻状况:"
                  prop="wedlock"
                >
                  <el-radio-group v-model="employee.wedlock">
                    <el-radio label="未婚">未婚</el-radio>
                    <el-radio label="已婚">已婚</el-radio>
                    <el-radio label="离异">离异</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="13">
                <el-form-item
                  label="聘用形式:"
                  prop="engageForm"
                >
                  <el-radio-group v-model="employee.engageForm">
                    <el-radio label="劳动合同">劳动合同</el-radio>
                    <el-radio label="劳务合同">劳务合同</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

            </el-row>

          </el-form>

        </div>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitDialog"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import _ from 'lodash'
export default {

  name: 'EmpBasic',

  data() {
    return {
      employee: {},
      employees: [],
      checkedEmployeeIds: [],
      nations: [],
      politicsStatuses: [],
      tiptopDegrees: [],
      joblevels: [],
      positions: [],
      departments: [],
      checkedDepartmentName: '所属部门',
      tiptopDegrees: ['博士', '硕士', '本科', '专科', '高中', '初中', '小学', '其他'],
      keyword: '',
      loading: false,
      currentPage: 1,
      size: 10,
      total: 50,
      rules: {},
      dialogVisible: false,
      popoverVisible: false,
      popoverVisible2: false,
      advanceSearchVisible: false,
      dialogTitle: '',
      engageDateScope: '',
      importButtonText: '导入数据',
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      props: {
        label: 'name',
        children: 'children'
      }
    }

  },

  methods: {
    //分页查询所有员工信息
    initEmployees() {
      if (this.keyword || this.keyword.trim() != '') {
        this.employee.name = this.keyword
      }
      let info = ''
      if (this.employee.name) {
        info += `&name=${this.employee.name}`
      }
      if (this.employee.gender) {
        info += `&gender=${this.employee.gender}`
      }
      if (this.engageDateScope.length > 0) {
        info += `&engageDateScope=${this.engageDateScope}`
      }
      this.loading = true
      this.getRequest(`/employee/basic/?currentPage=${this.currentPage}&size=${this.size}` + info).then(resp => {
        if (resp) {
          this.employees = resp.list
          this.total = resp.total
          this.employee = {}
        }
        this.loading = false
      })
    },
    //初始化表单中下拉菜单数据
    initData() {
      if (window.localStorage.getItem('nations')) {
        this.nations = JSON.parse(window.localStorage.getItem('nations'));
      } else {
        this.getRequest(`/employee/basic/nation`).then(resp => {
          if (resp) {
            this.nations = resp
            window.sessionStorage.setItem('nations', resp)
          }
        })
      }

      if (window.localStorage.getItem('politicsStatuses')) {
        this.nations = JSON.parse(window.localStorage.getItem('politicsStatuses'));
      } else {
        this.getRequest(`/employee/basic/politicsStatus`).then(resp => {
          if (resp) {
            this.politicsStatuses = resp
            window.sessionStorage.setItem('politicsStatuses', resp)
          }
        })
      }

      if (window.localStorage.getItem('departments')) {
        this.nations = JSON.parse(window.localStorage.getItem('departments'));
      } else {
        this.getRequest(`/employee/basic/department`).then(resp => {
          if (resp) {
            this.departments = resp
            window.sessionStorage.setItem('departments', resp)
          }
        })
      }

      if (window.localStorage.getItem('joblevels')) {
        this.nations = JSON.parse(window.localStorage.getItem('joblevels'));
      } else {
        this.getRequest(`/employee/basic/joblevel`).then(resp => {
          if (resp) {
            this.joblevels = resp
            window.sessionStorage.setItem('joblevels', resp)
          }
        })
      }
    },
    //初始化职位信息
    initPisitions() {
      this.getRequest(`/employee/basic/position`).then(resp => {
        if (resp) {
          this.positions = resp
        }
      })
    },

    //获取最大工号
    getMaxWordId() {
      this.getRequest(`/employee/basic/maxWorkId`).then(resp => {
        if (resp) {
          this.employee.workId = resp
        }
      })
    },

    //表格多选框改变触发
    handleSelectionChange(val) {
      this.checkedEmployeeIds = []
      val.forEach(employee => {
        this.checkedEmployeeIds.push(employee.id)
      });
    },
    //打开添加员工对话框并初始化数据
    showDialog(row) {
      if (row) {
        this.dialogTitle = '更新员工信息'

        this.employee = _.cloneDeep(row)
      } else {
        this.dialogTitle = '添加员工'
        this.employee = {
          address: "测试数据仅部门信息未选择",
          beginContract: "2022-08-15",
          beginDate: "2022-08-09",
          birthday: "2022-08-16",
          conversionTime: "2022-08-31",
          departmentId: null,
          email: "aaa@aaa.com",
          endContract: "2022-08-31",
          engageForm: "劳动合同",
          gender: "男",
          idCard: "210803175412451514",
          jobLevelId: 6,
          name: "测试数据",
          nationId: 2,
          nativePlace: "测试数据仅部门信息未选择",
          phone: "18546254725",
          politicId: 3,
          posId: 52,
          school: "测试数据仅部门信息未选择",
          specialty: "测试数据仅部门信息未选择",
          wedlock: "未婚",
          tiptopDegree: "博士"
        }
      }
      this.initData()
      this.initPisitions()
      this.getMaxWordId()
      this.dialogVisible = true
    },
    //对话框关闭触发方法
    dialogClose() {
      this.employee = {}
      this.checkedDepartmentName = '所属部门'
      this.popoverVisible = false
    },
    //删除员工
    deleteEmployee(row) {
      this.$confirm(`该操作将永久删除[${row.name}]员工,是否确认？`, '提示', { type: 'warning' }).then(() => {
        this.deleteRequest(`/employee/basic/${row.id}`).then(resp => {
          if (resp) {
            this.initEmployees()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },

    //批量删除员工
    deleteEmployees() {
      this.$confirm(`该操作将永久删除勾选的员工信息,是否确认？`, '提示', { type: 'warning' }).then(() => {
        let ids = '?ids='
        this.checkedEmployeeIds.forEach(id => {
          ids += `${id}&ids=`
        })
        this.deleteRequest(`/employee/basic/` + ids).then(resp => {
          if (resp) {
            this.initEmployees()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },

    handleSizeChange(val) {
      this.size = val
      this.initEmployees()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.initEmployees()
    },
    //点击树形控件节点触发
    handleNodeClick(data) {
      this.checkedDepartmentName = data.name
      this.employee.departmentId = data.id
      this.popoverVisible = false
      this.popoverVisible2 = false
    },
    //添加员工
    addEmployee() {
      this.postRequest('/employee/basic/', this.employee).then(resp => {
        console.log(this.employee);
        if (resp) {
          this.dialogVisible = false
          this.employee = {}
          this.initEmployees()
        }
      })
    },

    //更新员工
    updateEmployee() {
      this.putRequest('/employee/basic/', this.employee).then(resp => {
        if (resp) {
          this.dialogVisible = false
          this.employee = {}
          this.initEmployees()
        }
      })
    },

    //点击确认对话框触发
    submitDialog() {
      if (this.employee.id) {
        this.updateEmployee()
      } else {
        this.addEmployee()
      }
    },

    //显示高级搜索框
    showAdvanceSearch() {
      this.advanceSearchVisible = !this.advanceSearchVisible
      this.initData()
      this.initPisitions()
    },
    //关闭高级搜索时触发,由监听器触发
    closeAdvanceSearchVisible() {
      this.popoverVisible2 = false
      this.employee = {}
      this.engageDateScope = []
      this.initEmployees()
    },
    //导出员工数据
    exportEmployees() {
      this.downloadRequest(`/employee/basic/export`)
    },

    beforeUpload() {
      this.importButtonText = '正在导入'
    },
    onSuccess() {
      this.importButtonText = '导入数据'
      this.$message.success('导入成功')
      this.initEmployees()
    },
    onError() {
      this.importButtonText = '导入数据'
      this.$message.error('导入失败')
    },
  },
  mounted() {
    this.initEmployees()
  },

  watch: {
    advanceSearchVisible(val) {
      //val没有值表示关闭，val是高级搜索状态变化前的值
      if (!val) {
        this.closeAdvanceSearchVisible()
      }
    }
  }
}
</script>


<style scoped>
.head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.head-left {
  display: flex;
  width: 35%;
}
.operation-button {
  padding: 3px;
}
.foot {
  display: flex;
  justify-content: space-between;
}

.advance-search-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>